<template>
  <div class="checkbox">
    <input type="checkbox" v-model="val" @change="onChange">
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  name: 's-checkbox',
  emits: ['update:value', 'change'],
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const val = ref(props.value);
    watch(() => props.value, (v) => {
      val.value = v;
    });
    return {
      val,
      onChange() {
        const v =  val.value;
        emit('update:value', v);
        emit('change', v);
      },
    };
  },
});
</script>
<style scoped lang="scss">
.checkbox {

}
</style>
